/*
 * @Author: jjjjwei 1506865174@qq.com
 * @Date: 2022-08-10 16:59:17
 * @LastEditors: puyue 10857397+puyue123@user.noreply.gitee.com
 * @LastEditTime: 2022-08-12 11:34:17
 * @FilePath: \react\react-routeredux\src\component\projectmanage\toubiaoguanli.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useState, useLayoutEffect } from "react";
import "./../../assets/less/projectmanage.less";
import { Table, Input, Button, Modal, Form } from "antd";

const columns = [
  {
    title: "Full Name",
    align: "center",
    dataIndex: "name",
    key: "name",
    // fixed: "left",
  },
  {
    title: "Age",
    align: "center",
    dataIndex: "age",
    key: "age",
    // fixed: "left",
  },
  {
    title: "Column 1",
    dataIndex: "address",
    align: "center",
    key: "1",
  },
  {
    title: "Column 2",
    align: "center",
    dataIndex: "address",
    key: "2",
  },
  {
    title: "Column 3",
    align: "center",
    dataIndex: "address",
    key: "3",
  },
  {
    title: "Column 4",
    align: "center",
    dataIndex: "address",
    key: "4",
  },
  {
    title: "Column 5",
    align: "center",
    dataIndex: "address",
    key: "5",
  },
  {
    title: "Column 6",
    align: "center",
    dataIndex: "address",
    key: "6",
  },
  {
    title: "Column 7",
    align: "center",
    dataIndex: "address",
    key: "7",
  },
  {
    title: "Column 8",
    align: "center",
    dataIndex: "address",
    key: "8",
    render: (address) => {
      return address === 1 ? "nan" : "nv";
    },
  },
  {
    title: "Action",
    key: "operation",
    // fixed: "right",
    align: "center",
    render: () => <a href="###">action</a>,
  },
];
const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York Park",
  },
  {
    key: "2",
    name: "Jim Green",
    age: 40,
    address: "London Park",
  },
];
export default function Toubiaoguanli() {
  const [values1, setValues1] = useState("");
  const [values2, setValues2] = useState("");
  let values;
  const onButtonClick = () => {
    console.log(values1, values2);
  }; // TODO: implements  button click events
  const onButtonClear = () => {
    setValues1(null);
    setValues2(null);
  }; // TODO: implements button clear events
  const [visible, setVisible] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState("Content of the modal");

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    setModalText("The modal will be closed after one seconds");
    setConfirmLoading(true);
    setTimeout(() => {
      setVisible(false);
      setConfirmLoading(false);
    }, 1000);
  };

  const handleCancel = () => {
    console.log("Clicked cancel button");
    setVisible(false);
  };
  const [addVisible, setaddVisible] = useState(false);
  useLayoutEffect(() => {});

  return (
    <div className="Toubiaoguanlic">
      <div>
        <Button type="primary" onClick={showModal}>
          Open Modal with async logic
        </Button>
        <Modal
          destroyOnClose={true}
          cancelText="取消"
          okText="确定"
          title={modalText}
          visible={visible}
          onOk={handleOk}
          confirmLoading={confirmLoading}
          onCancel={handleCancel}
        >
          <div>
            <Form>
              <Form.Item
                label="Username"
                name="username"
                rules={[
                  {
                    required: true,
                    message: "Please input your username!",
                  },
                ]}
              >
                <Input
                  placeholder="Enter your name"
                  type="text"
                  onChange={(e) => {
                    console.log(e.target.value);
                  }}
                  onCancel={(e) => {}}
                />
              </Form.Item>
            </Form>
          </div>
        </Modal>
      </div>
      <Input
        addonBefore="提示"
        onChange={(e) => {
          values = e.target.value;
          setValues1(values);
        }}
        value={values1}
      />
      <Input
        addonBefore="提示"
        onChange={(e) => {
          values = e.target.value;
          setValues2(values);
        }}
        value={values2}
      />
      {addVisible ? (
        <Button onClick={onButtonClear}>重置表单信息</Button>
      ) : (
        <>
          <Button onClick={onButtonClick}>获取表单信息</Button>
          <Button
            onClick={(e) => {
              setaddVisible(true);
            }}
          >
            add
          </Button>
        </>
      )}
      {values1},{values2}
      <Table
        pagenation={{ defaultPageSize: 1, pageSize: 1 }}
        columns={columns}
        dataSource={data}
        ellipsis={true}
        filterMultiple={true}
        // loading={true}
        scroll={
          {
            // x: 1300,
          }
        }
      />
    </div>
  );
}
